<!-- page content -->
<div id="myVue" class="right_col" role="main">
    <h3>This is Vue test page.</h3>
    <p>========== 数据单项绑定 =========</p>
    <h4>{{company}}</h4>
    <p>{{user.name}}</p>
    <p>{{user.age}}</p>
    <p>{{user.gender}}</p>
    <p>{{user.roles}}</p>
    <p>{{user.city}}</p>
    <!-- <form>
        <input type="text" :value="user.name">
    </form> -->
    <p>========= 数据双向绑定 ==========</p>
    <form>
        <p><input type="text" v-model.trim="user.name"></p>
        <p><input type="number" v-model.number="user.age"></p>
        <p><input type="radio" value="male" v-model="user.gender">男</p>
        <p><input type="radio" value="female" v-model="user.gender">女</p>
        <p>v-for：<span v-for="item in genders">
            <input type="radio"  :value="item" :key="item.id" v-model="user.gender">{{item}}
        </span></p>
        <p>
            <input type="checkbox" value="1" v-model="user.roles">admin
            <input type="checkbox" value="2" v-model="user.roles">manager
            <input type="checkbox" value="3" v-model="user.roles">staf
        </p>
        <p>v-for：
            <span v-for="item in roles">
                <input type="checkbox" :value="item.id" :key="item.id" v-model="user.roles">{{item.name}}
            </span>
        </p>
        <p>
            <select v-model="user.city">
                <option value="1">chengdu</option>
                <option value="2">chongqing</option>
                <option value="3">wuhan</option>
                <option value="4">changsha</option>
                <option value="5">nanjing</option>
            </select>
        </p>
        <p>v-for：
            <select v-model="user.city">
                    <option v-for="(item, index) in cities" :value="item.id" :key="item.id">{{item.name}} -- {{index}}</option>
            </select>
        </p>
        <p>
            <ul>
                <li v-for="item in cities" id="item.id" :key="item.id">{{item.name}}</li>
            </ul>
        </p>
        <p>
            <table>
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                </tr>
                <tr v-for="item in cities">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </table>
        </p>
    </form>
    <p>============= 条件渲染 ===============</p>
    <p><span v-if="user.name == 'yyr'">只有条件满足才渲染</span></p>
    <p><span v-show="user.name == 'YYR'">无论是否满足都会加载，只是满足条件才会display</span></p>
    <p>================ 事件绑定 ===============</p>
    <p>
        <button @click="test1()">Test1</button>
    </p>
    <p>
        <button name="btn" data="qwewqda" @click="test2($event)">Test2</button>
    </p>
</div>

<script>
    var myVue = new Vue({
        el: "#myVue",
        data: {
            company: "SFAC",
            user: {
                name: "Yenny Yao",
                age: 18,
                gender: "female",
                roles: [1, 2],
                city: "chengdu",
            },
            roles: [{
                id: 1,
                name: "admin"
            }, {
                id: 2,
                name: "manager"
            }, {
                id: 3,
                name: "staf"
            }, ],
            genders: ["male", "female"],
            cities: [{
                id: 1,
                name: "chengdu"
            }, {
                id: 2,
                name: "chongqing"
            }, {
                id: 3,
                name: "wuhan"
            }, {
                id: 4,
                name: "changsha"
            }, {
                id: 5,
                name: "nanjing"
            }, ],
        },
        methods: {
            test1: function() {
                console.log("This is test 1 function.");
            },
            test2: function(event) {
                console.log(event.currentTarget.name);
                console.log(event.currentTarget.attributes.data.value);
                console.log("This is test 2 function.");
            },
        },
    });
</script>